window.onload = function () {

    /*  initSltCity();
      document.getElementById('sltCity').onchange = setAreas;*/

    initSelect('sltCity', cities);
    initSelect('sltArea', cities[0].areas)
  /* document.getElementById('sltCity').onchange = function () {

        var sltCity = document.getElementById('sltCity');
       var cityId = sltCity.selectedOptions[0].value;
        var currentCity = cities.find(function (item) {
            return item.id == cityId;
        })
        initSelect('sltArea', currentCity.areas)
    }*/


}


function initSelect(selector, arr) {

    var slt = document.getElementById(selector);
    slt.innerHTML = "";

    for (var key in arr) {

        var opt = document.createElement('option');
        opt.value = arr[key].id;
        opt.innerText = arr[key].name;

        slt.appendChild(opt)
    }

}


function initSltCity() {

    var sltCity = document.getElementById('sltCity');
    sltCity.innerHTML = "";

    for (var key in cities) {

        var opt = document.createElement('option');
        opt.value = localCities[key].id;
        opt.innerText = localCities[key].name;

        sltCity.appendChild(opt)
    }

}


function setAreas() {

    var sltArea = document.getElementById('sltArea');
    sltArea.innerHTML = "";
    var sltCity = document.getElementById('sltCity');
    var cityId = sltCity.selectedOptions[0].value;

    var current = cities.find(function (item) {
        return item.id == cityId;
    })

    var areas = current.areas;

    for (var key in areas) {

        var opt = document.createElement('option');
        opt.value = areas[key].id;
        opt.innerText = areas[key].name;

        sltArea.appendChild(opt)
    }

}